<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  <title>回答审核</title>
  <link rel="stylesheet" href="../lib/layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../css/element.css"/>
  <script src="../js/jquery.min.js" type="text/javascript" charset="utf-8"></script>

  <script src="../js/axios.js"></script>
  <script src="../js/requestjs.js"></script>
  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>
</head>
<body>

<div id="app">
  <!--查看文章详情-->
  <el-dialog title="文章详情" :visible.sync="dialogFormVisible" width="50%">
    <el-form label-width="80px" :model="details">
      <el-form-item label="作者">
        <el-input v-model="details.user.uname"></el-input>
      </el-form-item>
      <el-form-item label="提交时间">
        <el-input v-model="details.rdate"></el-input>
      </el-form-item>
      <el-form-item label="内容">
        <el-input type="textarea" :rows="5" v-model="details.rcontent"/>
      </el-form-item>
    </el-form>
    <span slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button v-if="details.aState === 0" type="primary" @click="checkFunc(details)"> pass </el-button>
      <el-button v-if="details.aState === 0" type="primary" @click="checkFunc(details)">no pass </el-button>
      <el-button v-else type="primary" @click="dialogFormVisible = false">确 定</el-button>
    </span>
  </el-dialog>


  <table class="layui-hide" id="demo" lay-filter="test"></table>
  <div id="page"></div>

</div>
 
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="check">审核</a>
</script>

<script type="text/html" id="buttonTpl">
  {{#  if(d.rstate == 1){ }}
  <button class="layui-btn layui-btn-xs">未审核</button>
  {{#  }else if(d.rstate == -1){ }}
  <button class="layui-btn-warm layui-btn-xs">已下架</button>
  {{#  }else if(d.rstate == 2){ }}
  <button class="layui-btn-danger layui-btn-xs">已审核</button>
  {{#  } }}
</script>

<!-- <blockquote class="layui-elem-quote layui-quote-nm layui-hide" id="footer">layui {{ layui.v }} 提供强力驱动</blockquote> -->
  
<script src="../lib/layui/layui.js"></script>
<script src="../js/vue.js"></script>
<script src="../js/element.js"></script>
<script type="text/javascript">


  var app = new Vue({
    el: "#app",
    data: {
      dialogFormVisible: false,
      check: false,
      delMark: false,
      checkDetail: '',
      details: {
        user:{
          uname:""
        }
      }
    },
    methods: {
      openDetail(data) {
        console.log(data)
        this.dialogFormVisible = true;
        this.details = data;
      },
      checkFunc(data) {
        this.details = data;
        this.check = true;
      },
      checkCommit(state) {
        this.details.aCheakDescribe = this.checkDetail;
        this.details.aState = state;
        var checkTime = '';
        var myDate = new Date();
        checkTime = myDate.getFullYear() + '-' + (((myDate.getMonth() + 1) <= 9) ? '0' + (myDate.getMonth() + 1) : (myDate.getMonth() + 1)) + '' +
                '-' + (myDate.getDate() <= 9 ? '0' + (myDate.getDate() + 1) : (myDate.getDate() + 1)) + ' '
                + (myDate.getHours() <= 9 ? '0' + myDate.getHours() : myDate.getHours())
                + ':' + (myDate.getMinutes() <= 9 ? '0' + myDate.getMinutes() : myDate.getMinutes())
                + ':' + (myDate.getSeconds() <= 9 ? '0' + myDate.getSeconds() : myDate.getSeconds()) + '.0';
        this.details.aChechTime = checkTime;

        if (state == 1) {
          methodaxios.post('http://localhost:9001/zx-app/pass', this.details, res => {
            this.check = false;
            this.dialogFormVisible = false;
            layui.table.reload("demo");
            this.checkDetail = '';
            this.details = {}
          })
        }
      },

      delFunc(data) {
        this.details = data;
        this.delMark = true;
      },
      delzx() {
        console.log(this.details);
        this.details.aState = -1
        methodaxios.post('http://localhost:9001/zx-app/upd', this.details, res => {
          this.check = false;
          this.dialogFormVisible = false;
          this.delMark = false;
          layui.table.reload("demo");
        })
      }
    }

  })




layui.config({
  version: '1594038785991' //为了更新 js 缓存，可忽略
});
 
layui.use(['laydate', 'laypage', 'layer', 'table', 'carousel', 'upload', 'element', 'slider'], function(){
  var laydate = layui.laydate //日期
  ,laypage = layui.laypage //分页
  ,layer = layui.layer //弹层
  ,table = layui.table //表格
  ,carousel = layui.carousel //轮播
  ,upload = layui.upload //上传
  ,element = layui.element //元素操作
  ,slider = layui.slider //滑块
  
  //向世界问个好
  //layer.msg('Hello World');
  
  //监听Tab切换
  element.on('tab(demo)', function(data){
    layer.tips('切换了 '+ data.index +'：'+ this.innerHTML, this, {
      tips: 1
    });
  });

  //页面第一次请求 默认 1页 10条
  function dataLists(pageNum, numPerPage) {
    $.get("http://localhost:8080/sys-a/findA", {
      page: pageNum, // 页码数
      limit: numPerPage // 每页条数
    }, function (data) {
      console.log(data)
      //let datalist = JSON.parse(data)
      dataList(data.data) // 数据传到 table组件
      page(data.data)   // 数据传到 分页组件
    })
  }

  dataLists(1, 10)

  function page(data) {
    laypage.render({
      elem: 'page', //注意，这里的 page 是 ID，不用加 # 号
      count: data.sum, //数据总数，从服务端得到
      limit: data.list.length, // 每页条数
      limits: [10, 20, 30, 40, 50],
      layout: ['count', 'prev', 'page', 'next', 'limit', 'skip'],
      jump: function (obj, first) {
        console.log("obj-----------------------------")
        console.log(obj)
        //obj包含了当前分页的所有参数，比如：
        //console.log(obj.curr); //得到当前页，以便向服务端请求对应页的数据。
        //console.log(obj.limit); //得到每页显示的条数
        //首次不执行
        if (!first) {
          //do something
          numpage(obj.curr, obj.limit) // 分页点击传参
        }
      }
    });
  }

  // 从新写了 一个请求
  function numpage(pageNum, numPerPage) {
    $.get("http://localhost:8080/sys-a/findA", {
      page: pageNum,
      limit: numPerPage
    }, function (data) {
      //let datalist = JSON.parse(data)
      dataList(data.data) // 传到table组件
    })
  }


  function dataList(data) {
    table.render({
      elem: '#demo',
      cols: [[ //表头
        {type: 'checkbox', fixed: 'left', width: 50}
        , {
          field: 'user.uid', title: 'ID', templet: function (data) {
            return data.user.uid;
          }, width: 60, sort: true, fixed: 'left'
        }
        , {
          field: 'user.uname', title: '作者', templet: function (data) {
            return data.user.uname;
          }, width: 100}
        , {field: 'rquestionId', title: '问题ID', width: 100}
        , {field: 'rcontent', title: '内容', width: 240}
        , {field: 'rdate', title: '创建时间', width: 170}
        , {field: 'rstate', title: '状态', width: 80, templet: '#buttonTpl'}
        , {field: 'checkDescribe', title: '审核描述', width: 170}
        , {field: 'checkTime', title: '审核时间', width: 200}
        , {fixed: 'right', width: 114, align: 'center', toolbar: '#barDemo'}
      ]],
      data: data.list, // 数据
      limit: data.sum, // 显示的条数
      //page: true, // 开启分页
    });
  }
  //监听行工具事件
  table.on('tool(test)', function (obj) { //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
    var data = obj.data //获得当前行数据
    layEvent = obj.event; //获得 lay-event 对应的值
    if (layEvent == 'detail') {
      console.log("查询详情")
      app.openDetail(data);
    } else if (layEvent == 'check') {
      app.checkFunc(data);
      console.log('审核操作');
    }
  });


});
</script>
</body>
</html>        
        